<template>
	<view class="container">
		<mescroll-body ref="mescroll" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<block v-for="(item, index) in Banktransactionlist" :key="index">
				<tui-sticky :scrollTop="scrollTop" :ref="`stickyRef${index}`" :sticky-id="`sticky_${index}`" :nodeScrollTop="(item.node && item.node.scrollTop) ? item.node.scrollTop : 0" @nodeChange="stickyNode($event, index)">
					<template v-slot:header>
						<view class="sticky-item column-css">
							<view>
								<!-- <picker mode="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange"> -->
								<picker mode="date" fields="month" @change="bindDateChange">
									{{ item.date }}
									<image class="logo" style="width: 20rpx;height: 20rpx;" mode="aspectFill" src="../../static/icon_select.png"></image>
								</picker>
							</view>
							<view class="amount row-css" style="margin-top: 8rpx;">
								<view>收入 ￥{{ item.incomeAmount }}</view>
								<view style="margin-left: 32rpx;">提现 ￥{{ item.expendAmount }}</view>
							</view>
						</view>
					</template>
					<template v-slot:header1>
						<view class="sticky-item column-css">
							<view>
								<!-- <picker mode="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange"> -->
								<picker mode="date" fields="month" @change="bindDateChange">
									{{ item.date }}
									<image class="logo" style="width: 20rpx;height: 20rpx;" mode="aspectFill" src="../../static/icon_select.png"></image>
								</picker>
							</view>
							<view class="amount row-css">
								<view>支出 ￥{{ item.expendAmount }}</view>
								<view style="margin-left: 20rpx;">收入 ￥{{ item.incomeAmount }}</view>
							</view>
						</view>
					</template>
					<template v-slot:content>
						<!--内容 start-->
						<view class="list-view">
							<block v-for="(ceot, index1) in item.tradeList" :key="index1">
								<view class="list-item" hover-class="hover" :hover-stay-time="150" @click="detail(ceot)">
									<view class="des-box">
										<view v-if="ceot.transactionType == 1" class="tit flex">
											<image src="@/static/icon_bill_square.png" mode=""></image>
											<text>运费代收-{{ceot.loadingOrderBillNo}}</text>	
										</view>
										<view v-if="ceot.transactionType == 2" class="tit flex">
											<image src="@/static/icon_bill_circle.png" mode=""></image>
											<text>运费收入-{{ceot.loadingOrderBillNo}}</text>
										</view>
										<view v-if="ceot.transactionType == 3" class="tit flex">
											<image src="@/static/icon_bill_card.png" mode=""></image>
											<text>余额提现-{{ceot.bankName}}</text>
										</view>
										<view class="time">{{ ceot.creationTime }}</view>
									</view>
									<view class="row-css" style="align-items: center;">
										<view class="tit">{{ ceot.recordType == 1 ? '+' : '-' }}{{ ceot.money }}</view>
										<image class="logo" mode="aspectFill" src="../../static/icon_enter.png"></image>
									</view>
								</view>
							</block>
						</view>
						<!--内容 end-->
					</template>
				</tui-sticky>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
import tuiSticky from '@/components/better-sticky/better-sticky.vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import MescrollBody from '@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue';
import dayjs from 'dayjs';
export default {
	mixins: [MescrollMixin], // 使用mixin
	components: {
		tuiSticky,
		MescrollBody
	},
	data() {
		return {
			scrollTop: 0,
			Banktransactionlist: [],
			page: 1,
			pageSize: 20,
			month: '',
			bankNo:  '',
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 20 // 每页数据的数量,默认10
				},
				noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			},
			type:1,
		};
	},
	onLoad(options) {
		if(options) this.bankNo = options.bankNo
	},
	methods: {
		bindDateChange: function(e) {
			this.month = e.target.value.replace(/-/g, '');
			this.page = 1;
			this.onwaybill(null);
		},
		detail(item) {
			let info = JSON.stringify(item)
			console.log(item.driverId,info)
			uni.navigateTo({
				// url: `./billDetail?info=${info}`
				url: `./billDetail?info=`+item.driverDetailsId
			});
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调*/
		downCallback(mescroll) {
			this.month = '';
			mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
		},
		/*上拉加载的回调*/
		upCallback(mescroll) {
			this.page = mescroll.num; // 页码, 默认从1开始
			//联网加载数据
			this.onwaybill(mescroll);
		},
		sortKey(array, key) {
		  return array.sort(function(a, b) {
				var x = a[key];
				var y = b[key];
				return x > y ? -1 : x < y ? 1 : 0;
			});
		},
		timestampToTime(timestamp) {
		  var  date =  new  Date(timestamp);
		  let Y = date.getFullYear() +  '-' ;
		  let M = (date.getMonth()+1 < 10 ?  '0' +(date.getMonth()+1) : date.getMonth()+1) +  '-' ;
		  // let D = date.getDate() +  ' ' ;
		  let D = (date.getDate()+1 < 10 ?  '0' +(date.getDate()+1) : date.getDate()+1) +  ' ' ;
		  let h = date.getHours() +  ':' ;
		  let m = date.getMinutes() +  ':' ;
		  let s = date.getSeconds();
		  return  Y+M+D;
		  // return  Y+M+D+h+m+s;
		},
		onwaybill(mescroll) {
			console.log(mescroll)
			this.wxRequest({
				url: `${this.API}/DriverDetails/getDriverDetails`,
				method: 'POST',
				data: {
					pageNum: this.page,
					pageSize: this.pageSize,
					month: this.month,
					type:this.type
					// bankNo: this.bankNo ? this.bankNo : ''
				},
				title: '查询中...',
				success: res => {
					let monthListdata= [];
					let tradeListdata = res.data.data.tradeData.list;
					// tradeListdata.forEach((item) => {
					// 	item.creationTime = this.timestampToTime(item.creationTime)
					// 	console.log(item.creationTime,"7777777777777////")
					// })
					if (this.page == 1) {
						this.Banktransactionlist = [];
					}
					monthListdata = this.sortKey(res.data.data.monthList,"month")
					// new
					if (tradeListdata && tradeListdata.length) {
						let obj = {}
						tradeListdata.forEach(k => {
							let mKey = k.creationTime.substring(0, 7)
							if (!obj[mKey]) {
								obj[mKey] = []
							} 
							obj[mKey].push(k)
							
						})
						console.log(obj)
						let startMonth = tradeListdata[0].creationTime.substring(0, 7)
						if (this.Banktransactionlist && this.Banktransactionlist.length) {
							let fM = this.Banktransactionlist[this.Banktransactionlist.length - 1].date
							let cM = tradeListdata[0].creationTime.substring(0, 7)
							let aM = dayjs(fM).subtract(1, 'month').format('YYYY-MM')
							console.log(aM)
							if (cM != aM && cM != fM)  {
								// 上一页请求的数据最后的时间与当前请求的数据开始的时间存在断的月份
								startMonth = aM
							}
						}
						let endMonth = tradeListdata[tradeListdata.length - 1].creationTime.substring(0, 7)
						let start = monthListdata.findIndex(item => item.month == startMonth)
						let end = monthListdata.findIndex(item => item.month == endMonth)
						let list = monthListdata.slice(start > -1 ? start : 0, end > -1 ? end + 1 : undefined)
						list.forEach(item => {
							let mKey = item.month 
							let mIndex = this.Banktransactionlist.findIndex(k => k.date == item.month)
							if (mIndex > -1) {
								if (obj[mKey]) {
									let list = [...this.Banktransactionlist[mIndex].tradeList, ...obj[mKey]]
									this.Banktransactionlist[mIndex].tradeList = list
								}
							} else {
								this.Banktransactionlist.push({
									date: item.month,
									expendAmount: item.expendAmount,
									incomeAmount: item.incomeAmount,
									tradeList: obj[mKey] || []
								})
							}
						})
						
						this.Banktransactionlist.forEach((item, index) => {
							let stickyRef = this.$refs['stickyRef' + index]
							stickyRef && stickyRef[0].init()
						})
					}
					
					// old 
					// console.log("dddd===================",this.Banktransactionlist);
					// for (let i = 0; i < monthListdata.length; i++) {
					// 	let iscek = false;
					// 	for (let k = 0; k < this.Banktransactionlist.length; k++) {
					// 		if (monthListdata[i].month == this.Banktransactionlist[k].date) {
					// 			iscek = true;
					// 		}
					// 	}
					// 	if (!iscek) {
					// 		let monthlist = {
					// 			date: monthListdata[i].month,
					// 			expendAmount: monthListdata[i].expendAmount,
					// 			incomeAmount: monthListdata[i].incomeAmount,
					// 			tradeList: []
					// 		};
					// 		this.Banktransactionlist.push(monthlist);
					// 	}
					// 	for (let j = 0; j < tradeListdata.length; j++) {
					// 		// tradeListdata[j].creationTime = this.timestampToTime(tradeListdata[j].creationTime)
					// 		if (tradeListdata[j].creationTime.substring(0, 7) == monthListdata[i].month) {
					// 			this.Banktransactionlist[i].tradeList.push(tradeListdata[j]);
					// 		}
					// 	}
					// }
					console.log(this.Banktransactionlist)
					if (mescroll != null) {
						mescroll.endBySize(res.data.data.tradeData.size, res.data.data.tradeData.total);
						setTimeout(() => {
							this.mescroll.endSuccess(res.data.data.tradeData.size);
						}, 20);
					}
				}
			});
		},
		
		stickyNode(node, index) {
			console.log(node)
			this.Banktransactionlist[index].node = node
			if (index == 0) {
				this.Banktransactionlist[index].node.scrollTop = 0
			} else {
				let heights  = this.Banktransactionlist.slice(0, index).map(item => item.node.height)
				this.Banktransactionlist[index].node.scrollTop = this.sum(heights)
			}
		},
		sum(arr) {
		    var s = 0;
		    arr.forEach(function(val, idx, arr) {
		        s += val;
		    }, 0);
		  
		    return s;
		}
	},
	//页面滚动执行方式
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style lang="scss">
.container {
	padding-bottom: env(safe-area-inset-bottom);
}

.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.tips {
	background: #fff;
	padding: 50upx 34upx;
	color: #555;
	font-size: 24upx;
	line-height: 42upx;
	position: relative;
}

.tips::before {
	content: '';
	position: absolute;
	border-top: 1upx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	top: 0;
	right: 0;
	left: 0;
}

/* .sticky-container{
 position: relative;
} */
/* sticky 容器 start */
.sticky-item {
	width: 100%;
	padding: 20upx 30upx;
	background: #fafafa;
	display: flex;
	/* align-items: center; */
	justify-content: space-between;
	box-sizing: border-box;
}

/* sticky 容器 end */

.date {
	height: 54upx;
	font-size: 28upx;
	background: #fff;
	padding: 0 28upx;
	border-radius: 25upx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	/* box-shadow: 0 0 1upx #7A7A7A; */
}

.date::after {
	content: '';
	/* position: absolute; */
	height: 200%;
	width: 200%;
	border: 1upx solid #eaeef1;
	border-radius: 60upx;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	left: 0;
	top: 0;
}

.amount {
	text-align: right;
	color: #7a7a7a;
	font-size: 24upx;
}

.list-view {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.list-view::after {
	content: '';
	/* position: absolute; */
	border-top: 1upx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	top: 0;
	right: 0;
	left: 0;
}

.list-item {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 20upx;
	box-sizing: border-box;
	background: #fff;
	justify-content: space-between;
	border: 1rpx solid #F9F9F9;
	&:last-child{
		border: none;
	}
}

.list-item::after {
	left: 120upx;
}

.item-last::after {
	left: 0 !important;
}

.content-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.logo {
	width: 30rpx;
	height: 30rpx;
	margin-left: 20rpx;
	flex-grow: 1;
}

.des-box {
	box-sizing: border-box;
	vertical-align: top;
	color: #333;
	font-size: 24upx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.flex{
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #000;
		image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}
	}
}
.tit {
	font-size: 32upx;
	// max-width: 420upx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.time {
	color: #888;
	margin-top: 8rpx;
	padding-left: 44rpx;
}

.money {
	font-size: 38upx;
	font-weight: 500;
	/* color: #000; */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 20upx;
}
</style>
